<template>
  <el-row>
    <!--订单信息-->
    <!--<el-col :span="24"> {{routeName}}</el-col>-->
    <el-col :span="24">
      <OrderInfo :chOrderService="chOrderService" :routeName="routeName" :state="state"></OrderInfo>
    </el-col>
    <!--客户信息：服务订单有-->
    <el-col :span="24">
      <UserInfo :chOrderConsigneeInfo="chOrderConsigneeInfo" v-if="chOrderService.orderType === 'STORAGEORDERTYPE01'"></UserInfo>
    </el-col>
    <!--商品信息-->
    <el-col :span="24">
      <Portlet title="商品信息"  style="position:relative;">
        <!--搜索表单-->
        <el-form ref="searchForm" class="el-form-s el-form-col" :model="search" label-position="left" v-if="state == 3">
          <el-row>
            <el-col :lg="5" :xl="5">
              <el-form-item prop="manufacturersName" >
                <el-input clearable placeholder="厂家名称" v-model="search.manufacturersName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="5" :xl="5" :offset="1">
              <el-form-item prop="productName" >
                <el-input clearable placeholder="商品名称" v-model="search.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="5" :xl="5" :offset="1">
              <el-form-item prop="packageName" >
                <el-input clearable placeholder="包件名称" v-model="search.packageName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="5" :xl="5" :offset="1">
              <el-form-item >
                <!--<el-button type="primary" @click.prevent="searchFunc">搜索</el-button>-->
                <el-button type="primary" @click.prevent="reset">重置</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <!--表单-->
        <el-form :model="model" :rules="rules" label-position="left" ref="elForm" label-width="100px">
          <el-form-item label-width="0" prop="chSortingPackageBeans" :rules="[
                  {required: true, message: '商品信息必须', trigger: 'change', type: 'array'}
               ]">
            <el-table
              :data="model.chSortingPackageBeans | filterActive(this.search)"
              style="width:100%"
              border
              class="text-center"
            >
              <el-table-column
                align="center"
                min-width="150px"
                prop="manufacturersName"
                label="厂家名称"
              >
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="productNo"
                label="商品编号">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="productName"
                label="商品名称">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="bigClass"
                label="商品大类">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="120px"
                prop="middleClass"
                label="商品小类">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="80px"
                prop="standard"
                label="规格">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="120px"
                prop="packageCode"
                label="包件编号">
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                min-width="150px"
                prop="packageName"
                align="center"
                label="包件名称">
              </el-table-column>

              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="100px"
                prop="packageOneVolume"
                label="单包件体积">
                <!--<template slot-scope="scope">-->
                <!--{{ scope.row.volume | decimalNumFilter}}-->
                <!--</template>-->
              </el-table-column>
              <el-table-column
                v-if="productType == 1"
                align="center"
                min-width="100px"
                prop="packageOneWeight"
                label="单包件重量">
                <!--<template slot-scope="scope">-->
                <!--{{ scope.row.weight | decimalNumFilter}}-->
                <!--</template>-->
              </el-table-column>
              <el-table-column
                v-if="productType == 2 || productType == 3"
                align="center"
                min-width="120px"
                prop="productNum"
                label="商品数量">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="115px"
                prop="packagePlanNum"
                label="包件计划入库">
              </el-table-column>
              <el-table-column
                align="center"
                min-width="150px"
                v-if="state == 3"
                label="包件实际入库">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'chSortingPackageBeans.' + scope.$index + '.realNum'" :rules="[
                          {required: true, message: '实际入库包件必须', trigger: 'change'}
                       ]">
                    <el-input v-model="scope.row.realNum" :min="0" :max="99999" label="描述文字"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                v-if="state == 3"
                min-width="200px"
                align="center"
                label="分配库位">
                <template slot-scope="scope">
                  <el-form-item label-width="0" :prop="'chSortingPackageBeans.' + scope.$index + '.positionNum'" :rules="[
                          {required: true, message: '库位必须', trigger: 'change'}
                       ]">
                    <!--<el-select v-model="scope.row.positionNum" placeholder="请选择库位">-->
                    <!--<el-option-->
                    <!--v-for="item in warehouseIdArr"-->
                    <!--:key="item.value"-->
                    <!--:label="item.text"-->
                    <!--:value="item.value">-->
                    <!--</el-option>-->
                    <!--</el-select>-->
                    <select-position v-model="scope.row.positionNum" :id="scope.row.orderId"></select-position>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                v-if="state == 4"
                prop="num"
                align="center"
                min-width="120px"
                label="包件实际入库">
              </el-table-column>
              <el-table-column
                v-if="state == 4"
                align="center"
                min-width="120px"
                prop="positionName"
                label="分配库位">
                <!--<template slot-scope="scope">-->
                <!--{{ scope.row.positionName | decimalNumFilter}}-->
                <!--</template>-->
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div style="position:absolute;left:140px;top:17px;font-size:14px;color:red">商品类型： {{getProductName(productType)}}</div>
        <div v-if="state == 3" style="position:absolute;right:26px;top:8px;font-size:14px;"><el-button type="primary" @click.prevent="submit">确认入库</el-button></div>
        <!--总的包件体积重量-->
        <el-row style="margin-top:15px;font-size:14px">
          <el-col :span="6">
            总包件：<span> {{totalPackage}} 件</span>
          </el-col>
          <el-col :span="6">
            总体积：<span> {{totalVolumes}} m³</span>
          </el-col>
          <el-col :span="6">
            总重量：<span> {{totalWeight}} kg</span>
          </el-col>
        </el-row>
      </Portlet>
    </el-col>
  </el-row>
</template>

<script>
import {copy, dotData, alert} from '@/utils'
import SelectPosition from '@/views/oms/business/SelectPositionByEnter'
import OrderInfo from '@/views/oms/enterWarehouse/warehousingOrder/OrderInfo'
import UserInfo from '@/views/oms/enterWarehouse/warehousingOrder/UserInfo'
import CustomerInfo from '@/views/oms/enterWarehouse/warehouseConfirm/CustomerInfo'
import {decimalNumFilter, unixTimestampFilter} from '@/filters'
import DBLike from '@/utils/DBLike'
export default {
  name: 'warehouseRecordEnterShow',
  components: {
    UserInfo,
    CustomerInfo,
    OrderInfo,
    DBLike,
    SelectPosition
  },
  filters: {
    decimalNumFilter,
    unixTimestampFilter,
    filterActive: (arr, search) => {
      return new DBLike(arr).search(search)
    }
  },
  data() {
    return {
      id: this.$route.params.id,
      state: this.$route.query.state,
      routeName: this.$route.name,
      headerDetail: {},
      chOrderService: {}, // 订单信息
      chOrderConsigneeInfo: {}, // 客户信息
      productDetailBeans: [], // 产品信息
      loading: false,
      model: { // 把整个表格 都看作是要提交的东东model
        chSortingPackageBeans: [
        ]
      },
      params: {
        pageSize: 20,
        pageNum: 1
      },
      // warehouseIdArr: [],
      rules: {},
      // cargoOwnerArr: [], // 模拟 库位下拉选项
      search: {
        manufacturersName: '',
        productName: '',
        packageName: ''
      }
      // totalItem: 0
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
    // 标准产品1，通用产品2==自定义产品3
    productType() {
      return dotData(this.chOrderService, 'productType') || 1 // 默认为标准产品
    },
    // 总包件：num累加
    totalPackage() {
      let num = 0
      if (Array.isArray(this.model.chSortingPackageBeans)) {
        this.model.chSortingPackageBeans.forEach(v => {
          num += v.num
        })
      }
      return decimalNumFilter(num)
    },
    // 总体积：单包件*num
    totalVolumes() {
      let num = 0
      if (Array.isArray(this.model.chSortingPackageBeans)) {
        this.model.chSortingPackageBeans.forEach(v => {
          num += (v.packageOneVolume * v.num)
        })
      }
      return decimalNumFilter(num)
    },
    // 总重量：单重量*num
    totalWeight() {
      let num = 0
      if (Array.isArray(this.model.chSortingPackageBeans)) {
        this.model.chSortingPackageBeans.forEach(v => {
          num += v.packageOneWeight * v.num
        })
      }
      return decimalNumFilter(num)
    }
  },
  methods: {
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/recordOrder/orderDetailBean', {id: this.id}).then(response => {
        if (response.success) {
          this.totalItem = response.total
          this.chOrderService = response.data.chOrderService || {} // 订单信息
          this.chOrderConsigneeInfo = response.data.chOrderConsigneeInfo || {} // 客户信息
          // 获取包件 并初始化 表单model
          this.model.chSortingPackageBeans = response.data.productDetailBeans || [] // 商品信息
          this.model.chSortingPackageBeans.forEach(v => { // 初始化新建字段 放进chSortingPackageBeans里面
            // 实际入库：若没有单包件数，则取计划包件数，否则默认取单包件数
            if (!v.num) {
              this.$set(v, 'realNum', v.packagePlanNum)
            } else {
              this.$set(v, 'realNum', v.num) // 新建 实际包件数: liangyi让取num,不取packagePlanNum
            }
            this.$set(v, 'positionNum', v.positionId) // 新建 库位: 默认为后端给的 暂定值：positionId
            this.$set(v, 'RowId', v.packageId) // 新建 包件id
          })
          console.log('0000', this.model.chSortingPackageBeans)
        }
      })
    },
    unixTimestampFilter,
    // 过滤 商品类型 最终：productType通过计算而来：标准产品1，通用产品2==自定义产品3
    getProductName(type) {
      if (type === 1) {
        return '标准产品'
      } else if (type === 2) {
        return '通用产品'
      } else if (type === 3) {
        return '自定义产品'
      }
      return ''
    },
    searchFunc() {
      // this.params = merge(this.params, this.search)
      // this.httpGetPackage()
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          alert('验证未通过')
          return
        }
        let tempArr = []
        let data = copy(this.model, true)
        if (Array.isArray(data.chSortingPackageBeans)) {
          data.chSortingPackageBeans.forEach(v => {
            tempArr.push({
              packageId: v.RowId,
              num: v.realNum,
              positonId: v.positionNum
            })
          })
        }
        data.chSortingPackageBeans = tempArr
        data.id = this.id
        let url = '/ms-warehouse-order/recordOrder/updateInhouse'
        this.$confirm('<p>确认货物都已入库完成？</p><p>系统将按照实际入库包件生成库存</p>', '提示', {
          type: 'warning',
          center: true,
          dangerouslyUseHTMLString: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            instance.confirmButtonLoading = false
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confrimButtonText = '入库中...'
              this.$ajax.post(url, data).then(response => {
                const success = dotData(response, 'success')
                if (success) {
                  done()
                  instance.confirmButtonLoading = false
                  setTimeout(() => {
                    this.$confirm('已完成入库', '已入库', {
                      type: 'success',
                      center: true,
                      confirmButtonText: '确定',
                      showCancelButton: false,
                      closeOnClickModal: false
                    }).then(_ => {
                      this.$router.push({path: '/redirect/ss-oms/enterWarehouse/warehouse-confirm/index'})
                    })
                  }, 1000)
                } else {
                  done()
                  instance.confirmButtonLoading = false
                  setTimeout(() => {
                    this.$message({
                      type: 'error',
                      message: `提交失败`
                    })
                  }, 500)
                }
              })
            } else { done() }
          }
        })
      })
    }
  }
}
</script>
